<!--
 * @Descripttion: 分享设置
 * @Author: xiao li
 * @Date: 2020-07-24 18:28:22
 * @LastEditors: xiao li
 * @LastEditTime: 2021-08-04 17:18:16
-->
<template>
  <div>
    <top-nav></top-nav>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="subForm"
        label-width="120px"
      >
        <el-form-item label="商城首页分享" prop="shop_share_status">
          <el-radio-group v-model="subForm.shop_share_status">
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips>开启后，分享按钮将展示在商城首页</lb-tool-tips>
        </el-form-item>
        <el-form-item label="分享图" prop="shop_share_img">
          <lb-cover
            :fileList="subForm.shop_share_img"
            @selectedFiles="getCover"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸: 750 * 750</lb-tool-tips>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo('subForm')">{{
            $t('action.submit')
          }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      subForm: {
        shop_share_status: 0,
        shop_share_img: []
      },
      subFormRules: {
        shop_share_status: { required: true },
        shop_share_img: { required: true, type: 'array', message: '请上传图片', trigger: 'change' }
      }
    }
  },
  created () {
    this.getFormInfo()
  },
  methods: {
    async getFormInfo () {
      let { data } = await this.$api.mallsShareInfo()
      data.shop_share_img = data.shop_share_img.length > 0 ? [{ url: data.shop_share_img }] : []
      for (let key in this.subForm) {
        this.subForm[key] = data[key]
      }
    },
    getCover (img) {
      this.subForm.shop_share_img = img
    },
    submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let subForm = JSON.parse(JSON.stringify(this.subForm))
          subForm.shop_share_img = subForm.shop_share_img[0].url || ''
          this.$api.mallsShareUpdate(subForm).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successSub'))
            }
          })
        }
      })
    }
  },
  watch: {
    'subForm.shop_share_img' (newValue, oldValue) {
      if (newValue && !oldValue) {
        this.$refs.subForm.clearValidate('shop_share_img')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-input-number,
.el-input {
  width: 300px;
}
.type-img {
  width: 280px;
  height: 498px;
  box-shadow: 0 1px 10px rgba(21, 13, 13, 0.5);
}
</style>
